

import React, { useState } from 'react';
import {
  DesktopOutlined,
  FileOutlined,
  PieChartOutlined,
 
} from '@ant-design/icons';
import {  Layout, Menu, theme } from 'antd';
import { Outlet, useNavigate } from 'react-router-dom';
const { Header, Content, Footer, Sider } = Layout;

const auth=JSON.parse(sessionStorage.getItem('auth'))
// console.log(auth,1111)

function formatMenu(arr){
  let brr=arr.map(item=>{
    let menu={}
    menu.label=item.name
    menu.key=item.path
    menu.pid=item.pid
    menu.id=item.id
    menu.show=item.show
    return menu
  })
  return brr
}

const allAuth=formatMenu(auth)
// console.log(allAuth,333333)

// 筛选出一级菜单 !item.pid(item.pid==0)
let parents=allAuth.filter(item=>!item.pid && item.show).map(item=>{
  delete item.show
  return item
})
// console.log(parents,5555)

let icons=[<DesktopOutlined></DesktopOutlined>,<FileOutlined></FileOutlined>,<PieChartOutlined></PieChartOutlined>]

// 二级菜单
let menus=parents.map((v,i)=>{
  // 一级
  let props={...v}
  // console.log(props,99)
  // 筛选出二级菜单
  props.children=allAuth.filter(item=>item.pid===v.id && item.show).map(item=>{
    delete item.show
    return item
  })
  props.icon=icons[i]
  return props
})
// console.log(menus,2222)


const App = () => {
  const [collapsed, setCollapsed] = useState(false);
  const {
    token: { colorBgContainer, borderRadiusLG },
  } = theme.useToken();
  const navigate=useNavigate()
  // 点击菜单路径
  const gopage=({key})=>{
    navigate('/home'+key)
  }
  return (
    <Layout
      style={{
        minHeight: '100vh',
      }}
    >
      <Sider collapsible collapsed={collapsed} onCollapse={(value) => setCollapsed(value)}>
        <div className="demo-logo-vertical" />
        <Menu theme="dark"  mode="inline" items={menus} onClick={gopage}/>
      </Sider>
      <Layout>
        <Header
          style={{
            padding: 0,
            background: colorBgContainer,
          }}
        />
        <Content
          style={{
            margin: '0 16px',
          }}
        >
        
          <div
            style={{
              padding: 24,
              minHeight: 360,
              background: colorBgContainer,
              borderRadius: borderRadiusLG,
            }}
          >
            <Outlet></Outlet>
          </div>
        </Content>
        <Footer
          style={{
            textAlign: 'center',
          }}
        >
          Ant Design ©{new Date().getFullYear()} Created by Ant UED
        </Footer>
      </Layout>
    </Layout>
  );
};
export default App;